<template>
  <div class="toplist">



    <div class="header">
        排行榜
        <div class="backs" @click="$router.go(-1)">
            <svg t="1667890894489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17226" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="17227"></path></svg>
        </div>
    </div>



    <div class="topimg">
            <img :src="bcimg" alt="">
            <div class="msg">
                <div class="svg">
                    <svg t="1667895643030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18396" width="200" height="200"><path d="M798.709965 499.949771C767.040217 605.381509 664.278099 694.832092 548.570149 694.832092L548.570149 950.823132 658.280594 950.823132C705.419516 950.823132 767.99104 976.861079 767.99104 1023.96343L554.677363 1023.96343 469.322637 1023.96343 256.00896 1023.96343C256.00896 1023.96343 282.010336 950.823132 329.149257 950.823132L475.429851 950.823132 475.429851 694.832092C359.685331 694.832092 256.959783 605.381509 225.290035 499.949771 126.404353 446.374503 0.017919 359.227838 0.017919 255.990309 0.017919 172.61037 30.992835 145.804451 73.158216 146.279863 114.080213 146.791845 219.438811 146.279863 219.438811 146.279863L219.438811-0.000731 804.561189-0.000731 804.561189 146.279863C804.561189 146.279863 906.591903 146.279863 950.841784 146.279863 992.495183 146.279863 1023.982081 171.001284 1023.982081 255.990309 1023.982081 364.45737 897.595647 446.374503 798.709965 499.949771ZM213.331596 290.914801C213.331596 290.914801 198.301265 217.408802 128.01344 213.349516 104.133132 211.92328 85.116655 225.637086 85.336076 255.990309 86.030909 340.394212 213.331596 383.985829 213.331596 383.985829L213.331596 290.914801ZM731.420891 73.139566 292.579109 73.139566 292.579109 365.737325C291.226013 535.934796 394.170981 621.691795 512 621.691795 629.829019 621.691795 731.420891 531.253817 731.420891 365.737325L731.420891 73.139566ZM895.98656 213.349516C825.662165 216.421408 810.668404 333.592164 810.668404 333.592164L810.668404 383.985829C810.668404 383.985829 936.798846 339.370248 938.663924 255.990309 939.358756 224.17428 927.83916 211.92328 895.98656 213.349516Z" p-id="18397" fill="#e6e6e6"></path></svg>
                </div>
                <div class="bangdan">{{bname}}</div>
                <div class="nexttime">下次出榜事件:11月14日17:00</div>
            </div>
    </div>

    <div class="under">
        <div class="left">
            <div :class="['item',has==1?'con':'']"  @click="no1"  >人气榜</div>
            <div :class="['item',has==2?'con':'']"  @click="no2"  >新作榜</div>
            <div :class="['item',has==3?'con':'']"  @click="no3"  >飙升榜</div>
            <div :class="['item',has==4?'con':'']"  @click="no4"  >畅销榜</div>
            <div :class="['item',has==5?'con':'']"  @click="no5"  >月票榜</div>
            <div :class="['item',has==6?'con':'']"  @click="no6"  >韩漫榜</div>
            <div :class="['item',has==7?'con':'']"  @click="no7"  >人气榜</div>
            <div :class="['item',has==8?'con':'']"  @click="no8"  >新作榜</div>
            <div :class="['item',has==9?'con':'']"  @click="no9"  >飙升榜</div>
            <div :class="['item',has==10?'con':'']" @click="no10" >畅销榜</div>
            <div :class="['item',has==11?'con':'']" @click="no11" >月票榜</div>
            <div :class="['item',has==12?'con':'']" @click="no12">韩漫榜</div>
        </div>
        <div class="right">
            <router-link tag="div" :to="'/show?id='+1" class="item" v-for="(item,index) in bianli" :key="index">
                <div class="imgs">
                    <img :src="item.imgs" alt="">
                </div>
                <div class="wenzibox">
                    <div class="name">全{{item.name}}</div>
                    <div class="show">{{item.jies}},人类只剩下十分之一的数量...</div>
                    <div class="kind">
                        <div class="items">{{item.bq[0]}}</div>
                        <div class="items">{{item.bq[1]}}</div>
                    </div>
                    <div class="topnum">{{item.where}}</div>
                </div>
            </router-link>
        </div>
    </div>
  </div>
</template>

<script>
import { gettopData } from "../api/toplists"
export default {
    data(){
        return{
            bname:"机器人",
            type:1,
            has:1,
            bcc:"",
            bcimg:"../assets/bcc/01.jpg",
            bianli:[],
            lists1:[],
            lists2:[],
            lists3:[],
            lists4:[],
            lists5:[]
        }
    },
    methods:{
        no1(){
            this.has = 1
            this.bcimg = this.bcc.no1
            this.bianli = this.lists1
            console.log(this.bcimg)
        },
        no2(){
            this.has = 2
            this.bcimg = this.bcc.no2
            this.bianli = this.lists2
        },
        no3(){
            this.has = 3
            this.bcimg = this.bcc.no3
            this.bianli = this.lists3
        },
        no4(){
            this.has = 4
            this.bcimg = this.bcc.no4
            this.bianli = this.lists4
        },
        no5(){
            this.has = 5
            this.bcimg = this.bcc.no5
            this.bianli = this.lists5
        },
        no6(){
            this.has = 6
            this.bcimg = this.bcc.no6
        },
        no7(){
            this.has = 7
            this.bcimg = this.bcc.no1
        },
        no8(){
            this.has = 8
            this.bcimg = this.bcc.no2
        },
        no9(){
            this.has = 9
            this.bcimg = this.bcc.no3
        },
        no10(){
            this.has = 10
            this.bcimg = this.bcc.no4
        },
        no11(){
            this.has = 11
            this.bcimg = this.bcc.no5
        },
        no12(){
            this.has = 12
            this.bcimg = this.bcc.no6
        },
    },
    created(){
        gettopData().then((data)=>{
            this.bcc = data.bcc
            this.lists1 = data.shujv1
            this.lists2 = data.shujv2
            this.lists3 = data.shujv3
            this.lists4 = data.shujv4
            this.lists5 = data.shujv5
            this.bianli = this.lists1
            console.log(this.bianli)
            console.log(this.bcc)
        })
    }
}
</script>

<style lang="scss">

.toplist .under{
    margin-top: 20px;
    display: flex;
    position: relative;
    .left{
        width: 20%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        .item{
            width: 90%;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 20px 0;
            font-size: 12px;
            &.con{
                background-color: #4f6069;
                border-radius: 0 15px 15px 0;
                color: #fff;
            }
        }
    }
    .right{
        width: 80%;
        height: 100%;
        margin-left: 20%;
        .item{
            width: 100%;
            display: flex;
            margin-bottom: 20px;
            .imgs{
                width: 30%;
                img{
                    width: 100%;
                }
            }
            .wenzibox{
                flex: 1;
                display: flex;
                flex-direction: column;
                .name{
                    font-size: 14px;
                }
                .show{
                    margin-top: 5px;
                    font-size: 12px;
                    color: #a0a0a0;
                }
                .kind{
                    margin-top: 5px;
                    display: flex;
                    .items{
                        border-radius: 5px;
                        border: 1px solid #999;
                        padding: 0px 5px;
                        font-size: 12px;
                        color: #a0a0a0;
                        text-align: center;
                        line-height: 16px;
                    }

                }
                .topnum{
                    margin-top: 20px;
                    color: #888;
                    font-size: 12px;
                }
            }
        }
    }
}
.toplist .header{
    width: 100%;
    text-align: center;
    line-height: 50px;
    height: 50px;
    background-color: #fff;
    position: relative;
    .backs{
        position: absolute;
        width: 18px;
        height: 18px;
        top: 3px;
        left: 10px;
        svg{
            width: 18px;
            height: 18px;
        }
    }
}
.toplist .topimg{

    width: 100%;
    position: relative;
    .msg{
        position: absolute;
        display: flex   ;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        left: 13%;
        top: 20%;
        width: 270px;
        height: 150px;
        .svg{
            width: 30px;
            height: 30px;
            margin-bottom: 10px;
            svg{
                width: 30px;
                height: 30px;
            }
        }
        .bangdan{
            margin-bottom: 10px;
            color: #fff;
            font-size: 18px;

        }
        .nexttime{
            color: #fff;
            font-size: 12px;
        }
    }
    img{
        width: 100%;
    }
}
</style>